import { Component, Vue, Prop, Emit } from "vue-property-decorator";
import { InlineMessageProps } from "@/components/__utils__/prop";
import { id } from "@/views/home/jsondata.js";
const name = "InlineMessageList";

@Component({
  name,
})
class InlineMessageList extends Vue implements InlineMessageProps {
  protected inlineMessageListClass = "a-inline-message";
  @Prop()
  messageList!: Array<{
    [key: string]: any;
  }>;
  @Prop()
  isFinish!: boolean;
  @Prop()
  typeNow!: string;
  @Prop()
  isTimeFinish!: boolean;
  static install: (Vue: any) => void;
  @Emit("click")
  inlineMessageListClick(k: { [key: string]: any }) {
    return k;
  }
  render() {
    const { messageList, isFinish, isTimeFinish, typeNow } = this.$props;
    const { inlineMessageListClass, inlineMessageListClick } = this;
    const btnFontArray = ["1-0","1-1","1-2","1-3"];

    if (!messageList || !messageList.length) {
      return null;
    }

    return (
      <div class={inlineMessageListClass}>
        {messageList.map((list: AnyObject, index: number) => {
          return (
            <div class={`${inlineMessageListClass}-list`}>
              <div
                class={`${inlineMessageListClass}-list-body ${
                  isTimeFinish ? `${inlineMessageListClass}-list-time-body` : ""
                }`}
              >
                <div
                  class={`${inlineMessageListClass}-list-content ${
                    isTimeFinish
                      ? `${inlineMessageListClass}-list-time-content`
                      : ""
                  }`}
                >
                  <div>
                    <h2>
                      {`${
                        // typeNow === "1-0" ? list.subject : list.defName
                        list.subject
                      }`}
                    </h2>
                    {!isTimeFinish && (
                      // <span>{`创建人：${list.creator}   创建时间：${list.createTime}`}</span>
                      // 'cqc'
                      <div>
                        <span
                          class={`${inlineMessageListClass}-list-time-action-1-1-icon`}
                        />
                        <span class={` ${inlineMessageListClass}-node-color`}>
                          当前节点：
                        </span>
                        <span
                          class={`${inlineMessageListClass}-list-time-action-1-1-node  ${inlineMessageListClass}-node-color`}
                        >
                          {list.currentNodeName ||
                            list.nodeName ||
                            list.name ||
                            `xxxx节点`}
                          <span
                            class={`${inlineMessageListClass}-list-nodeuser`}
                          >
                            {(list.assignInfo && list.assignInfo) ||
                              (list.assigneeNames &&
                                list.assigneeNames.replace(/\[用户\]/g, ""))}
                          </span>
                        </span>
                      </div>
                    )}
                    {isFinish && !isTimeFinish && (
                      <img
                        src={require(`@/assets/img/${(
                          list.status || list.instStatus
                        ).toLowerCase()}.png`)}
                        alt={list.subject}
                      />
                    )}
                  </div>
                  {isTimeFinish && (
                    <div class={`${inlineMessageListClass}-list-action`}>
                      <a-button onclick={() => inlineMessageListClick(list)}>
                        {typeNow === "1-1" ||
                        typeNow === "1-0" ||
                        typeNow === "1-3" ||
                        typeNow === "1-2"
                          ? "去查看"
                          : "去办理"}
                      </a-button>
                    </div>
                  )}
                </div>
                {isTimeFinish ? (
                  <div class={`${inlineMessageListClass}-list-time-action`}>
                    {typeNow === "1--1" ? (
                      <span
                        class={`${inlineMessageListClass}-list-time-action-1-1`}
                      >
                        {`创建人：${list.creator}   创建时间：${list.createTime}`}
                      </span>
                    ) : (
                      <span
                        class={`${inlineMessageListClass}-list-time-action-1-1`}
                      >
                        {
                          <span>
                            {/* typeNow === "1-2" && list.status === "unread" ? `$
                            {inlineMessageListClass}-list-unread` : "" */}
                            {typeNow === "1-2" ? (
                              <span
                                class={
                                  list.status === "unread"
                                    ? `${inlineMessageListClass}-list-unread`
                                    : `${inlineMessageListClass}-list-read`
                                }
                              >
                                [{list.status === "unread" ? "未读" : "已读"}]
                              </span>
                            ) : (
                              <span
                                class={`${inlineMessageListClass}-list-time-action-1-1-icon`}
                              />
                            )}
                            <span>当前节点：</span>
                            <span
                              class={`${inlineMessageListClass}-list-time-action-1-1-node `}
                            >
                              {list.currentNodeName ||
                                list.nodeName ||
                                list.name ||
                                `xxxx节点`}
                              <span
                                class={`${inlineMessageListClass}-list-nodeuser`}
                              >
                                {(list.assignInfo && list.assignInfo) ||
                                  (list.assigneeNames &&
                                    list.assigneeNames.replace(
                                      /\[用户\]/g,
                                      ""
                                    )) ||
                                  list.triggerUserName}
                              </span>
                            </span>

                            {/* {typeNow === "1-2" ? (
                              <span
                                class={`a-inline-message-list-time-action-1-1-icon-cs`}
                              >
                                <span>
                                  抄送人：{list.triggerUserName || ""}
                                </span>
                                {typeNow === "1-2" ? (
                                  <span
                                    class={`a-inline-message-list-time-action-1-1-icon-cs-time`}
                                  >
                                    {list.receiveTime.split(" ")[0] || ""}
                                  </span>
                                ) : (
                                  ""
                                )}
                              </span>
                            ) : (
                              ""
                            )} */}
                          </span>
                        }
                      </span>
                    )}
                  </div>
                ) : (
                  <div class={`${inlineMessageListClass}-list-action`}>
                    <a-button onclick={() => inlineMessageListClick(list)}>
                      {btnFontArray.indexOf(typeNow) !== -1
                        ? "去查看"
                        : "去办理"}
                    </a-button>
                  </div>
                )}
                {isFinish && isTimeFinish && list.status !== "running" && (
                  <img
                    src={require(`@/assets/img/${(
                      list.status || list.instStatus
                    ).toLowerCase()}.png`)}
                    alt={list.subject}
                  />
                )}
              </div>
            </div>
          );
        })}
      </div>
    );
  }
}

InlineMessageList.install = function(Vue) {
  Vue.component(name, InlineMessageList);
};

export default InlineMessageList;
